<template>
    <div>
        <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./img/banner01.png" alt=""></div>
              <div class="swiper-slide"><img src="./img/banner02.png" alt=""></div>
              <div class="swiper-slide"><img src="./img/banner03.png" alt=""></div>
            </div>
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper'
    import 'swiper/css/swiper.css'
    export default {
        data(){
            return{
            }
        },
        mounted(){
            new Swiper('.swiper', {
	        autoplay: {
                disableOnInteraction:false,
                delay:2500
            },//可选选项，自动滑动
            loop:true,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            effect : 'fade',
            pagination: {
              el: '.swiper-pagination',
              clickable:true
            },
            })
        }
    }

</script>

<style scoped>
    .swiper{
        margin-top: 0.5vh;
        background: white;
        width: 100%;
        overflow: hidden;
        position: relative;
        /* max-height: 300px; */
    }
    .swiper-button-prev{
        position: absolute;
        top: 50%;
        /* transform: translateY(-50%); */
        left: 0;
    }
    img{
        border-radius: 10px;
        width: 100vw;
        height: 25vh;
        /* height: 100%; */
    }
</style>